<template>
  <div>
    <el-container class="common-layout">
      <el-main>
        <div class="divs">
          <span class="title">
            <el-icon>
              <House />
            </el-icon>
            基础资料/承运商管理/<span style="color: #0098ff">新增承运商</span>
          </span>
        </div>
        <p style="padding-right: 1080px">
          <strong style="color: #006eff">|</strong>&nbsp;&nbsp;基础信息
        </p>
        <el-form :model="form" label-width="auto" ref="refform" :rules="result">
          <div
            style="
              background-color: #fff;
              padding: 10px;
              text-align: center;
              border-radius: 10px;
              width: 1100px;
              margin-left: 35px;
            "
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="承运商编码:" prop="Cr_encode">
                  <el-input
                    v-model="form.Cr_encode"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司名称:" prop="Cr_cp_name">
                  <el-input
                    v-model="form.Cr_cp_name"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="承运商类型:" prop="Cr_type">
                  <el-select v-model="form.Cr_type" placeholder="请选择">
                    <el-option
                      v-for="item in tableDataType"
                      :key="item.value"
                      :label="item.dict_label"
                      :value="item.dict_label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="印业执照号码:" prop="Cr_bn_license_num">
                  <el-input
                    v-model="form.Cr_bn_license_num"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="税务登记号码:" prop="Cr_bus_license_num">
                  <el-input
                    v-model="form.Cr_bus_license_num"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="法人代表:" prop="Cr_tax_reg">
                  <el-input
                    v-model="form.Cr_tax_reg"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="区域:" prop="Cr_region">
                  <el-cascader
                    v-model="form.Cr_region"
                    :options="Addressvalue"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="公司地址:" prop="Cr_address">
                  <el-input
                    v-model="form.Cr_address"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="邮编:" prop="Cr_postcode">
                  <el-input
                    v-model="form.Cr_postcode"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="承运商状态:" prop="Cr_state">
                  <el-switch
                    v-model="form.Cr_state"
                    inline-prompt
                    size="large"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                                <div class="grid-content ep-bg-purple" />
                            </el-col> -->
            </el-row>
            <el-row :gutter="20">
              <el-form-item label="营业执照:" prop="Cr_bn_license">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:5261/api/Company/Upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="form.Cr_bn_license"
                    :src="form.Cr_bn_license"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16">
                <el-form-item label="备注信息:" prop="Cr_information">
                  <el-input
                    v-model="form.Cr_information"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                                <div class="grid-content ep-bg-purple" />
                            </el-col> -->
            </el-row>
          </div>
          <p style="padding-right: 1050px">
            <strong style="color: #006eff">|</strong>&nbsp;&nbsp;联系人信息
          </p>
          <div
            style="
              background-color: #fff;
              padding: 10px;
              text-align: center;
              border-radius: 10px;
              width: 1100px;
              margin-left: 35px;
            "
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="姓名:" prop="Cr_name">
                  <el-input
                    v-model="form.Cr_name"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号码:" prop="Cr_phone">
                  <el-input
                    v-model="form.Cr_phone"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="部门:" prop="Cr_department">
                  <el-input
                    v-model="form.Cr_department"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="职位:" prop="Cr_posts">
                  <el-input
                    v-model="form.Cr_posts"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="E-mail:" prop="Cr_email">
                  <el-input
                    v-model="form.Cr_email"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QQ:" prop="Cr_qq">
                  <el-input
                    v-model="form.Cr_qq"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <p style="padding-right: 1060px">
            <strong style="color: #006eff">|</strong>&nbsp;&nbsp;财务信息
          </p>
          <div
            style="
              background-color: #fff;
              padding: 10px;
              text-align: center;
              border-radius: 10px;
              width: 1100px;
              margin-left: 35px;
            "
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="发票抬头:" prop="Cr_io_title">
                  <el-input
                    v-model="form.Cr_io_title"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="纳税人识号:" prop="Cr_tp_identification">
                  <el-input
                    v-model="form.Cr_tp_identification"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行:" prop="Cr_bank">
                  <el-input
                    v-model="form.Cr_bank"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="开户名称:" prop="Cr_ao_name">
                  <el-input
                    v-model="form.Cr_ao_name"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行账号:" prop="Cr_account">
                  <el-input
                    v-model="form.Cr_account"
                    placeholder="请输入内容"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <p style="padding-right: 1060px">
            <strong style="color: #006eff">|</strong>&nbsp;&nbsp;合同信息
          </p>
          <div
            style="
              background-color: #fff;
              padding: 10px;
              text-align: center;
              border-radius: 10px;
              width: 1100px;
              margin-left: 35px;
            "
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="是否签订合同:" prop="Cr_contract">
                  <el-switch
                    v-model="form.Cr_contract"
                    inline-prompt
                    size="large"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="合同附件:">
                                    <el-upload v-model:file-list="fileList" class="upload-demo"
                                        action="http://localhost:5261/api/Company/Upload" multiple
                                        :on-preview="handlePreview" :on-remove="handleRemove"
                                        :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed">
                                        <el-button type="primary" link>
                                            上传附件
                                        </el-button>
                                        <template #tip>
                                            <div class="el-upload__tip">
                                                jpg/png files with a size less than 500KB.
                                            </div>
                                        </template>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row> -->
          </div>
          <div style="height: 50px"></div>
          <div class="button">
            <el-form-item>
              <el-button>取消</el-button>
              <el-button type="primary" @click="Add">保存</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { onMounted, ref, reactive } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { Upload } from "element-plus";
import { useRouter } from "vue-router";
export default {
  setup() {
    let imageUrl = ref("");
    let router = useRouter();

    let form = reactive({
      Cr_encode: "", //承运商编码
      Cr_cp_name: "", //公司名称
      Cr_type: "", //承运商类型
      Cr_bn_license_num: "", //营业执照号码
      Cr_bus_license_num: "", //税务登记号码
      Cr_tax_reg: "", //法人代表
      Cr_region: "", //区域
      Cr_address: "", //公司地址
      Cr_postcode: "", //邮编
      Cr_state: false, //承运商状态
      Cr_bn_license: "", //营业执照
      Cr_information: "", //备注信息
      Cr_name: "", //姓名
      Cr_phone: "", //手机号码
      Cr_department: "", //部门
      Cr_posts: "", //职位
      Cr_email: "", //邮箱
      Cr_qq: "", //QQ
      Cr_io_title: "", //发票抬头
      Cr_tp_identification: "", //纳税识别号
      Cr_bank: "", //开户行
      Cr_ao_name: "", //开户名称
      Cr_account: "", //银行账号
      Cr_contract: false, //是否签订合同(0:否，1：是)
      Create_by: sessionStorage.getItem("empname"), //创建人
      Create_time: "", //创建时间
      Update_by: "", //最后修改人
      Update_time: "2024-02-02", //最后时间
      Is_del: 0, //是否删除（1：删除，0：未删除）
      Dv_num: 0, //司机数量
      vc_num: 0, //车辆数量
    });

    let refform = ref(null);

    const result = reactive({
      Cr_encode: [
        { required: true, message: "承运商编码不能为空", trigger: "blur" },
      ],
      Cr_cp_name: [
        { required: true, message: "公司名称不能为空", trigger: "blur" },
      ],
      Cr_type: [
        { required: true, message: "承运商类型不能为空", trigger: "blur" },
      ],
      Cr_bn_license_num: [
        { required: true, message: "营业执照号码不能为空", trigger: "blur" },
      ],
      Cr_bus_license_num: [
        { required: true, message: "税务登记号码不能为空", trigger: "blur" },
      ],
      Cr_tax_reg: [
        { required: true, message: "法人代表不能为空", trigger: "blur" },
      ],
      Cr_region: [{ required: true, message: "区域不能为空", trigger: "blur" }],
      Cr_address: [
        { required: true, message: "公司地址不能为空", trigger: "blur" },
      ],
      Cr_postcode: [
        { required: true, message: "邮编不能为空", trigger: "blur" },
      ],
      Cr_bn_license: [
        { required: true, message: "营业执照不能为空", trigger: "blur" },
      ],
      Cr_state: [
        { required: true, message: "承运商状态不能为空", trigger: "blur" },
      ],
      // Cr_information: [
      //   { required: true, message: "备注信息不能为空", trigger: "blur" },
      // ],
      Cr_name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
      Cr_phone: [
        { required: true, message: "手机号码不能为空", trigger: "blur" },
      ],
      Cr_department: [
        { required: true, message: "部门不能为空", trigger: "blur" },
      ],
      Cr_posts: [{ required: true, message: "职位不能为空", trigger: "blur" }],
      Cr_email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
      Cr_qq: [{ required: true, message: "QQ不能为空", trigger: "blur" }],
      Cr_io_title: [
        { required: true, message: "发票抬头不能为空", trigger: "blur" },
      ],
      Cr_tp_identification: [
        { required: true, message: "纳税识别号不能为空", trigger: "blur" },
      ],
      Cr_bank: [{ required: true, message: "开户行不能为空", trigger: "blur" }],
      Cr_ao_name: [
        { required: true, message: "开户名称不能为空", trigger: "blur" },
      ],
      Cr_account: [
        { required: true, message: "银行账号不能为空", trigger: "blur" },
      ],
      Cr_contract: [
        { required: true, message: "是否签订合同不能为空", trigger: "blur" },
      ],
    });

    let tableDataType = ref([]); //承运商类型
    let Addressvalue = ref([]); //始发地和目的地的值

    onMounted(() => {
      showtype();
      Address();
      Wb_numberShow();
    });

    const handleAvatarSuccess = (response, uploadFile) => {
      form.Cr_bn_license = URL.createObjectURL(uploadFile.raw);
    };

    const beforeAvatarUpload = (rawFile) => {
      if (rawFile.type !== "image/jpeg") {
        ElMessage.error("上传的图片必须是 JPG 格式,请选择正确的图片!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("上传的图片大小不能超过 2MB!");
        return false;
      }
      return true;
    };

    const uploadAction = "/your/upload/url"; // 替换为你的上传 API 地址
    const uploadHeaders = { "Content-Type": "multipart/form-data" };

    function showtype() {
      //承运商类型下拉框
      axios
        .get(
          "http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Car_type"
        )
        .then((res) => {
          tableDataType.value = res.data;
          console.log(tableDataType.value);
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function Address() {
      //区域
      axios
        .get("http://localhost:5261/api/Children/GetChildrens")
        .then((res) => {
          Addressvalue.value = res.data;
        })
        .catch((err) => {
          console.log("错误：" + err);
        });
    }

    function Add() {
      //添加
      refform.value.validate((valid) => {
        if (valid) {
          if (form.Cr_state == true) {
            form.Cr_state = 1;
          } else {
            form.Cr_state = 0;
          }
          if (form.Cr_contract == true) {
            form.Cr_contract = 1;
          } else {
            form.Cr_contract = 0;
          }
          form.Create_time = new Date().toISOString().slice(0, 10).toString();
          form.Cr_region =
            form.Cr_region[0] +
            "/" +
            form.Cr_region[1] +
            "/" +
            form.Cr_region[2];
          console.log(form.Cr_region);
          axios
            .post("http://localhost:5261/api/Carrier_ment/Add", form)
            .then((res) => {
              if (res.data) {
                ElMessage.success("添加成功！");
                router.push("/CYSGL");
                BH2();
              } else {
                ElMessage.success("添加失败！");
              }
            });
        } else {
          ElMessage.success("请填写完整数据!");
        }
      });
    }

    function Wb_numberShow() {
      //运单号的生成
      axios
        .get("http://localhost:5261/api/BH/BHGZ?prefix=CYS")
        .then((res) => {
          form.Cr_encode = res.data;
          console.log(res);
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

     function BH2() {   //修改编号最大值
            axios.get(`http://localhost:5261/api/BH/GetBH?prefix=CYS`).then((res) => {
                console.log(res);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

    return {
      form,
      tableDataType,
      showtype,
      Addressvalue,
      handleAvatarSuccess,
      beforeAvatarUpload,
      uploadHeaders,
      uploadAction,
      Plus,
      imageUrl,
      Add,
      result,
      refform,
      BH2
    };
  },
};
</script>

<style scoped>
.common-layout {
  /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
  background-color: #F5F9FF;
  height: 700px;
  width: 1250px;
  margin: auto;
  padding: auto;
  /* margin: 50px; */
  /* display: flex;
    align-items: center; */
}

.title {
  padding-right: 930px;
  padding-top: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: aqua;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 100px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.button {
  padding-right: 37px;
  margin-top: 20px;
  height: 50px;
  position: fixed;
  /* 固定位置 */
  top: auto;
  /* 距离顶部20像素 */
  right: 70px;
  /* 距离右侧20像素 */
  bottom: 20px;
  /* 底部自动 */
  left: auto;
  /* 左侧自动 */
  z-index: 1000;
  /* 确保它在其他内容之上 */
}
</style>